<template>
  <div>
    <!-- 第一版 -->
    <Sticky :offset-top="0">
      <div class="search">
        <HomeSearch @showSearch="showSearch" />
      </div>

      <div class="yijidaohang">
        <!-- 一级导航 -->
        <Tabs @click-tab="clickHandler">
          <Tab :title="item.name" v-for="item in tabList" :key="item.id"></Tab>
        </Tabs>
      </div>
    </Sticky>
    <!-- 二级导航 -->
    <div class="navcontianer" style="border-top: 1px solid #f3f3f3">
      <!-- 侧边导航 -->
      <div
        class="sidebarcontianer"
        style="display: flex; justify-content: space-between"
      >
        <Sidebar v-model="active1">
          <SidebarItem
            :title="item.name"
            v-for="item in tabWrap"
            :key="item.id"
            @click="changeSidebar"
          />
        </Sidebar>
      </div>
      <!--图片列表  -->
      <div class="vanImagecontainer">
        <div
          class="item"
          v-for="(item, index) in rankList.albums"
          :key="item.id"
          @click="toDetail(item.id)"
        >
          <!-- 图片 -->
          <div class="img">
            <div class="num">
              <img src="./images/top1.PNG" v-if="index === 0" />
              <img src="./images/top2.PNG" v-if="index === 1" />
              <img src="./images/top3.PNG" v-if="index === 2" />
              <span v-if="index > 2">{{ index + 1 }}</span>
            </div>
            <img :src="`${baseURL}` + '/' + item.cover" />
          </div>
          <!-- 文字介绍 -->
          <div class="text">
            <div class="title">{{ item.albumTitle }}</div>
            <div class="salePoint">{{ item.salePoint }}</div>
            <div class="icon">
              <Icon name="play" color="#999999" />
              <span>
                {{
                  `${
                    item.playCount / 100000000 > 1
                      ? (item.playCount / 100000000).toFixed(2) + "亿"
                      : (item.playCount / 10000).toFixed(2) + "万"
                  }`
                }}</span
              >
              <Icon name="friends-o" />
              <span>{{ item.trackCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ActionSheet v-model:show="isShowSearch">
      <Search @cancel="cancel" />
    </ActionSheet>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "Rank",
    components: { Icon },
  });
</script>

<script lang="ts" setup>
  import { onMounted, ref } from "vue";

  import { useRouter } from "vue-router";
  //第一步，引入接口函数
  import { Getrank1ListApi, Getrank2ListApi } from "@/api/rank";
  //第三步，引入获取的数据类型
  import { GetrankListModel, tabWrapListModel } from "@/api/model/rankModel";
  import { Icon, Tab, Tabs, Sticky, ActionSheet } from "vant";
  import { Sidebar, SidebarItem } from "vant";
  import { Image as VanImage } from "vant";
  import Search from "@/components/Search/index.vue";
  import HomeSearch from "@/components/HomeSearch/index.vue";

  // 控制搜索组件显示的标识
  const isShowSearch = ref(false);

  // 自定义事件——搜索页将取消按钮的状态传递过来
  const cancel = () => {
    isShowSearch.value = false;
  };

  // 显示搜索框
  const showSearch = () => {
    isShowSearch.value = true;
  };

  //顶部导航
  let active = ref<number>(0);
  //侧边导航
  let active1 = ref<number>(0);
  // 图片列表
  let rankList = ref<any>({});
  //默认第一个id
  let rankId = 100006;

  // 获取router实例
  const router = useRouter();
  // 定义转发代理数据
  const baseURL = import.meta.env.VITE_BASE_IMG;

  //第二步，定义一个数组用来存通过函数获取的数据
  const tabList = ref<GetrankListModel>([]);
  //定义一个数组装二级分类数据
  const tabWrap = ref<tabWrapListModel>([]);

  // tabs点击事件
  const clickHandler = (e: any) => {
    console.log(e, "tabs");
    //找到tableList里面的哪一项的name值和我点击的也就是e的里面title相同的一项，然后把这一项里面的tabWraps
    tabList.value.forEach((item) => {
      if (item.name === e.title) {
        tabWrap.value = item.tabWraps;
      }
    });
    console.log(tabWrap.value, 333);

    // 重新获取数据
    changeSidebar(0);
  };

  //第四步1，封装一个函数，用来获取一级分类数据，并处理数据
  const getRankList = async () => {
    const res = await Getrank1ListApi();
    console.log(res, "res");

    // 第六步 将tabList数据渲染到页面
    tabList.value = res.tabLists;
    tabWrap.value = tabList.value[0]?.tabWraps;
  };

  //第四步2,封装一个函数,获取图片列表
  const getRankList2 = async () => {
    const res2 = await Getrank2ListApi(rankId);
    console.log(res2, "res2");
    //第六步
    rankList.value = res2.rankList[0];
  };

  // 点击喜欢如不同的参数
  const changeSidebar = (e: any) => {
    console.log("e", e);
    //第六步
    rankId = tabWrap.value[e].rankingId;
    //初始化
    getRankList2();
  };

  // 点击跳转到详情页
  // const router = useRouter();
  const toDetail = (id: number) => {
    console.log(id);

    router.push({
      name: "Detail",
      params: {
        id: id,
      },
    });
  };

  //第五步，调用封装的函数
  onMounted(() => {
    getRankList();
    getRankList2();
  });
</script>

<style lang="scss" scoped>
  .yijidaohang {
    position: relative;
    top: -10px;
  }
  .navcontianer {
    display: flex;
    align-items: start;
    margin: 5px 0px;
    .sidebarcontianer {
      position: fixed;
    }
  }

  .vanImagecontainer {
    .item {
      display: flex;
      width: 280px;
      height: 100px;
      padding: 15px 0 15px 0px;
      margin-left: 60px;
      font-size: 16px;
      .img {
        display: flex;
        margin-right: 15px;
        margin-left: 15px;
        img {
          width: 70px;
          height: 70px;
        }
        .num {
          width: 35px;
          text-align: center;
          img {
            width: 25px;
            height: 25px;
            position: absolute;
            // margin-left: 5px;
            // z-index: -1;
            left: 80px;
          }
        }
      }
      .text {
        width: 170px;
        .title {
          font-size: 17px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
        .salePoint {
          color: #999999;
          margin: 5px 0 10px 0;
          font-size: 14px;
        }
        .icon {
          color: #999999;
          font-size: 12px;
          span {
            margin: 0px 3px;
          }
        }
      }
    }
  }
</style>
